﻿<!DOCTYPE html>
<!--隐患排查内容管理-设置频次-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <style>
        /*.el-select .el-input__suffix {
            top: 7px;
        }*/
        .el-input__icon {
            line-height: 1;
        }

        .el-select .el-input__inner {
            line-height: 1;
            height: 30px;
        }
    </style>
    <script>
        var DateList = [
            {
                name: 'month',//月
                code: '61',
                data: [
                    { key: '1', value: '一月' },
                    { key: '2', value: '二月' },
                    { key: '3', value: '三月' },
                    { key: '4', value: '四月' },
                    { key: '5', value: '五月' },
                    { key: '6', value: '六月' },
                    { key: '7', value: '七月' },
                    { key: '8', value: '八月' },
                    { key: '9', value: '九月' },
                    { key: '10', value: '十月' },
                    { key: '11', value: '十一月' },
                    { key: '12', value: '十二月' },
                ]
            },
            {
                name: 'day',//日
                code: '62',
                data: [
                    { key: '1', value: '1日' },
                    { key: '2', value: '2日' },
                    { key: '3', value: '3日' },
                    { key: '4', value: '4日' },
                    { key: '5', value: '5日' },
                    { key: '6', value: '6日' },
                    { key: '7', value: '7日' },
                    { key: '8', value: '8日' },
                    { key: '9', value: '9日' },
                    { key: '10', value: '10日' },
                    { key: '11', value: '11日' },
                    { key: '12', value: '12日' },
                    { key: '13', value: '13日' },
                    { key: '14', value: '14日' },
                    { key: '15', value: '15日' },
                    { key: '16', value: '16日' },
                    { key: '17', value: '17日' },
                    { key: '18', value: '18日' },
                    { key: '19', value: '19日' },
                    { key: '20', value: '20日' },
                    { key: '21', value: '21日' },
                    { key: '22', value: '22日' },
                    { key: '23', value: '23日' },
                    { key: '24', value: '24日' },
                    { key: '25', value: '25日' },
                    { key: '26', value: '26日' },
                    { key: '27', value: '27日' },
                    { key: '28', value: '28日' }
                ]
            },
            {
                name: 'week',//周
                code: '63',
                data: [
                    { key: '1', value: '星期一' },
                    { key: '2', value: '星期二' },
                    { key: '3', value: '星期三' },
                    { key: '4', value: '星期四' },
                    { key: '5', value: '星期五' },
                    { key: '6', value: '星期六' },
                    { key: '7', value: '星期日' },
                ]
            },
            {
                name: 'hour',//时
                code: '64',
                data: [
                    { key: '0', value: '0时' },
                    { key: '1', value: '1时' },
                    { key: '2', value: '2时' },
                    { key: '3', value: '3时' },
                    { key: '4', value: '4时' },
                    { key: '5', value: '5时' },
                    { key: '6', value: '6时' },
                    { key: '7', value: '7时' },
                    { key: '8', value: '8时' },
                    { key: '9', value: '9时' },
                    { key: '10', value: '10时' },
                    { key: '11', value: '11时' },
                    { key: '12', value: '12时' },
                    { key: '13', value: '13时' },
                    { key: '14', value: '14时' },
                    { key: '15', value: '15时' },
                    { key: '16', value: '16时' },
                    { key: '17', value: '17时' },
                    { key: '18', value: '18时' },
                    { key: '19', value: '19时' },
                    { key: '20', value: '20时' },
                    { key: '21', value: '21时' },
                    { key: '22', value: '22时' },
                    { key: '23', value: '23时' }
                ]
            },
        ]
        function getDateList(code) {
            var res = [];
            DateList.forEach(function (v, i) {
                if (v.code == code) {
                    res = v.data;
                }
            });
            return res;
        }
    </script>
</head>
<body>
    <div id="app" v-cloak>
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" size="mini" label-position="right">
            <!--<el-row style="width:100%;height:28px;">
                <div style="width:12.5%;height:28px;float:left;">
                    <el-checkbox v-model="Form.Frequency.isNot">{{'是否开启'}}</el-checkbox>
                </div>
                <div style="width:87.5%;height:28px;float:left;line-height:28px;">
                    <span style="float:left;width:28px;font-size:14px;">提前</span>
                    <el-input v-model="Form.Frequency.moveUp" size="mini" :disabled="Dom.RadioDisabled" style="width:100px;float:left;margin:0 10px;"></el-input>
                    <span style="float:left;width:200px;font-size:14px;">天进行提醒</span>
                </div>
            </el-row>-->
            <el-row style="padding: 5px;">
                <el-col :span="9">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Frequency.moveUp" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{'提前提醒天数'+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <!--第一行-按年-->
            <el-row style="padding: 5px;">
                <el-col :span="3" style="padding-top:0px;">
                    <el-radio v-model="Form.Frequency.type" :disabled="Dom.RadioDisabled" label="0">{{RisksManagement.RiskContent.AccordingYear}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingYear_Month" :disabled="Dom.SelectDisabled.AccordingYear_SelectDisabled" placeholder="月" @change="SelectToRadio('0')">
                        <el-option v-for="item in month" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingYear_Day" :disabled="Dom.SelectDisabled.AccordingYear_SelectDisabled" placeholder="日" @change="SelectToRadio('0')">
                        <el-option v-for="item in day" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>
                <!--<el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingYear_Hour" :disabled="Dom.SelectDisabled.AccordingYear_SelectDisabled" placeholder="时" @change="SelectToRadio('Year')">
                        <el-option v-for="item in hour" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>-->


            </el-row>
            <!--第二行-按月-->
            <el-row style="padding: 5px;">
                <el-col :span="3" style="padding-top:0px;">
                    <el-radio v-model="Form.Frequency.type" :disabled="Dom.RadioDisabled" label="1">{{RisksManagement.RiskContent.AccordingMonth}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Day" :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="日" @change="SelectToRadio('1')">
                        <el-option v-for="item in day" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>
                <!--<el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Hour" :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="时" @change="SelectToRadio('Month')">
                        <el-option v-for="item in hour" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>-->
            </el-row>
            <!--第三行-按周-->
            <el-row style="padding: 5px;">
                <el-col :span="3" style="padding-top:0px;">
                    <el-radio v-model="Form.Frequency.type" :disabled="Dom.RadioDisabled" label="2">{{RisksManagement.RiskContent.AccordingWeek}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Week" :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="星期" @change="SelectToRadio('2')">
                        <el-option v-for="item in week" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>
                <!--<el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Hour" :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="时" @change="SelectToRadio('Week')">
                        <el-option v-for="item in hour" :label="item.value" :value="item.key"></el-option>
                    </el-select>
                </el-col>-->

            </el-row>

            <!--第四行-自定义-->
            <el-row style="padding: 5px;">
                <el-col :span="3" style="padding-top: 2px;">
                    <el-radio v-model="Form.Frequency.type" :disabled="Dom.RadioDisabled" label="4">{{RisksManagement.RiskContent.Customized}}</el-radio>
                </el-col>
                <el-col :span="6">
                    <el-date-picker v-model="Dom.Value.Customized_Text"
                                    @change="SelectToRadio('4')"
                                    type="datetime" size="mini"
                                    :disabled="Dom.SelectDisabled.Customized_SelectDisabled"
                                    placeholder="选择时间"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :picker-options="pickerOptions"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="15">
                    <div class="el-form-item el-form-item--feedback el-form-item--mini">
                        <label class="el-form-item__label" style="width: 350px;text-align: left;padding-left:12px;">{{RisksManagement.RiskContent.Instructions}}</label>
                    </div>
                </el-col>

            </el-row>
            <el-row type="flex" justify="end">
                <el-form-item>

                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <script type="text/javascript">
        app = new Vue({
            id: '',
            el: '#app',
            data: {
                pickerOptions: {
                    disabledDate: function (time) {
                        //return time.getTime() < Date.now();//明天
                        return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;//今天
                    }
                },
                Dom: {
                    //值
                    Value: {
                        AccordingYear_Month: '',//按年-月
                        AccordingYear_Day: '',//按年-日
                        AccordingYear_Hour: '',//按年-时

                        AccordingMonth_Day: '',//按月-日
                        AccordingMonth_Hour: '',//按月-时

                        AccordingWeek_Week: '',//按周-周
                        AccordingWeek_Hour: '',//按周-时

                        Customized_Text: ''//自定义
                    },
                    //radio开关，true为禁用
                    RadioDisabled: false,
                    //select开关，true为禁用
                    SelectDisabled: {
                        AccordingYear_SelectDisabled: false,
                        AccordingMonth_SelectDisabled: false,
                        AccordingWeek_SelectDisabled: false,
                        Customized_SelectDisabled: false,
                    }
                },
                //业务表单内容
                Form: {
                    //id: '',
                    Frequency: {
                        isNotRemind: true,//是否提醒
                        month: '',//月
                        week: '',//周
                        day: '',//日
                        hour: '',//时
                        beginTimeByCustom: '',//自定义内容
                        type: '',//radio选中类型
                        moveUp: '0',//天数
                    },//提醒频次
                },
                //select的绑定值
                month: [],
                week: [],
                day: [],
                hour: [],
                //验证
                rules: [

                ]
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },

                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {


                            if (!mythis.Form.Frequency.moveUp) {
                                mythis.Form.Frequency.moveUp = 0;
                            }

                            if (mythis.Form.Frequency.moveUp < 0) {
                                showMessage('提醒天数不合法', 'error');
                                return false;
                            }

                            if (mythis.Dom.Value.Customized_Text) {
                                //验证大于当前时间
                            }
                            if (mythis.Form.Frequency.type == '4') {
                                if (!mythis.Dom.Value.Customized_Text) {
                                    showMessage('请填写自定义日期', 'error');
                                    return false;
                                }
                            }



                            //给Form赋值
                            BindFormValue(mythis);
                            parent.app.closeDialog();
                            parent.app.ListItem.dialogVisible = false;

                            //  onSubmitForm(this, '/api/RiskContent/SaveSetFrequency', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });

                },
                SelectToRadio: function (v) {
                    this.Form.Frequency.type = v;
                }

            },
            created: function () {
                //console.log(this.Form)
            },
            mounted: function () {
                //绑定select
                this.month = getDateList('61');
                this.week = getDateList('63');
                this.day = getDateList('62');
                this.hour = getDateList('64');
                console.log('parent.app.Form', parent.app.Form)

                this.Form.Frequency = {
                    isNotRemind: parent.app.Form.isNotRemind,//是否提醒
                    month: parent.app.Form.month,//月
                    week: parent.app.Form.week,//周
                    day: parent.app.Form.day,//日
                    hour: parent.app.Form.hour,//时
                    beginTimeByCustom: parent.app.Form.beginTimeByCustom,//自定义内容
                    type: parent.app.Form.type,//radio选中类型
                    moveUp: parent.app.Form.moveUp,//天数
                }
                //绑定select选中值
                BindSeleted(this);


            }
        });

        //绑定select选中值
        function BindSeleted(app) {
            console.log('app.Form.Frequency', app.Form.Frequency)
            switch (app.Form.Frequency.type) {
                //年
                case "0":
                    app.Dom.Value.AccordingYear_Month = app.Form.Frequency.month;
                    app.Dom.Value.AccordingYear_Day = app.Form.Frequency.day;
                    app.Dom.Value.AccordingYear_Hour = app.Form.Frequency.hour;
                    break;
                //月
                case "1":
                    app.Dom.Value.AccordingMonth_Day = app.Form.Frequency.day;
                    app.Dom.Value.AccordingMonth_Hour = app.Form.Frequency.hour;
                    break;
                //周
                case "2":
                    app.Dom.Value.AccordingWeek_Week = app.Form.Frequency.week;
                    app.Dom.Value.AccordingWeek_Hour = app.Form.Frequency.hour;

                    break;
                //自定义
                case "4":

                    app.Dom.Value.Customized_Text = app.Form.Frequency.beginTimeByCustom;
                    break;
                default: break;
            }
        }
        //给Form赋值
        function BindFormValue(app) {

            parent.app.Form.type = app.Form.Frequency.type

            parent.app.Form.moveUp = app.Form.Frequency.moveUp;

            switch (app.Form.Frequency.type) {
                case "0":

                    app.Form.Frequency.month = app.Dom.Value.AccordingYear_Month;
                    app.Form.Frequency.day = app.Dom.Value.AccordingYear_Day;
                    app.Form.Frequency.hour = app.Dom.Value.AccordingYear_Hour;

                    parent.app.Form.month = app.Form.Frequency.month;
                    parent.app.Form.day = app.Form.Frequency.day;
                    break;

                case "1":
                    app.Form.Frequency.day = app.Dom.Value.AccordingMonth_Day;

                    parent.app.Form.day = app.Form.Frequency.day;
                    break;

                case "2":
                    app.Form.Frequency.week = app.Dom.Value.AccordingWeek_Week;

                    parent.app.Form.week = app.Form.Frequency.week;
                    break;
                case "4":
                    app.Form.Frequency.beginTimeByCustom = app.Dom.Value.Customized_Text;

                    parent.app.Form.beginTimeByCustom = app.Form.Frequency.beginTimeByCustom;
                    parent.app.Form.nowTime = app.Form.Frequency.beginTimeByCustom;
                    break;
                default:
                    app.Form.Frequency.month = "";
                    app.Form.Frequency.day = "";
                    app.Form.Frequency.hour = "";
                    app.Form.Frequency.week = "";
                    app.Form.Frequency.text = "";
                    //app.Form.Frequency.moveUp = 0;
                    break;
            }
        }


    </script>

</body>
</html>

